<!-- 
    绝对粘底footer布局：position:absolute;
        正常情况下，当内容高度不足页面高度时，footer的底部会留有空白；
        使用绝对粘底布局，当内容不足页面高度时，使得footer在页面最底部；
        当内容超过一屏时，footer始终在最底部
    
    思路： 
        1. html和body的最小高度设置为100%，也就是整屏的高度
        2. 底部容器设置在body一层，并设置绝对布局，bottom设置为0(也就是底部容器基于body在最底部)
        3. 为了不使内容与底部重叠，需要设置内容的容器padding-bottom为合适的高度(最起码要大于 底部容器的高度)
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        html,body{
            height: 100%;
            /*min-height: 100%;*/
            min-width: 1200px;
        }
        body{
            font: 14px/1.5 "Microsoft YaHei", sans-serif;
            color: #666666;
            background: #e8e8e8;
        }
        .body{
            position: relative;
            min-height: 100%;
            height:auto !important;
            /* IE6不识别min-height */
            height:100%;
        }
        .header{
            width: 100%;
            background-color: #f1a899;
            height: 64px;
            box-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 4px 8px #DFDFDF, 0 0 0 transparent;
        }
        .section{
            width: 1200px;
            margin: 0 auto;
            padding: 30px 0 145px;
        }
        .container{
            background: #ffffff;
            height: 500px;
        }
        .footer{
            position: absolute;
            bottom: 0;
            height: 95px;
            width: 100%;
            background: #858B9A;
        }
    </style>
</head>
<body>
<div class="body">
    <div class="header">
        header页面头部
    </div>
    <div class="section">
        <div class="container">
            页面主体内容
        </div>
    </div>
    <div class="footer">
        footer页面底部
    </div>
</div>
</body>
</html>